<template>
	<view class="items flex items-center" @click="itemClick" :class="{selected: selected, mark: mark}">
		<view class="flex-1 flex">
			<text v-if="clicknumber === 3 && selected">--</text>
			<template v-else>
				{{index < 9 ? '0' + (index + 1) : index + 1}}.{{item.word}}
				<template v-if="clicknumber === 2"> ({{item.translation}})</template>
				
				<view v-if="(clicknumber === 1 && item.play) || item.play" class="flex items-center">
					<view class="mp3icon">
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
					</view>
				</view>
			</template>
		</view>
		<view class="flex items-center" v-if="ischeck">
			<view class="icon" :class="{correct: item.change === 1}" @click.stop="handleJoinEvent(1)"><uv-icon class="flex" name="checkmark" size="14" color="#fff"></uv-icon></view>
			<view class="icon" :class="{error: item.change === 2}" @click.stop="handleJoinEvent(2)"><uv-icon class="flex" name="close" size="14" color="#fff"></uv-icon></view>
		</view>
	</view>
	
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
	item: Object,
	index: Number,
	isback: Boolean,
	selected: Boolean,
	mark: Boolean,
	ischeck: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['play', 'joinEvent'])

const clicknumber = ref(0)

function itemClick(){
	clicknumber.value = clicknumber.value + 1
	if(clicknumber.value === 1){
		// emit('play')
	} else if(clicknumber.value === 4){
		clicknumber.value = 0
	}
	
	emit('play')
}

function handleJoinEvent(data){
	console.log(data)
	if(props.item.change === data && !props.isback){
		emit('joinEvent', 0)
		return false
	} 
	emit('joinEvent', data)
}
</script>

<style lang="scss" scoped>
.items{background-color: #e8ebff; border-radius: 12rpx; margin-bottom: 30rpx; padding: 30rpx; font-size: 36rpx; font-weight: 600; position: relative; overflow: hidden;}
.icon{border-radius: 100%; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; background-color: #aaa; margin-left: 20rpx;}
.icon.correct{background-color: #40d463;}
.icon.error{background-color: #ff5252;}
.selected{background-color: #f69b2c; color: #fff;}
.mark:after{content: ''; display: block; width: 8rpx; background-color: #4fd8e4; height: 100%; top: 0; position: absolute; left: 0;}

.mp3icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 30rpx; margin-left: 20rpx;}
.mp3icon .item{width: 4rpx;height: 14rpx;background-color: #fc5507;}
.selected .mp3icon .item{background-color: #fff;}

.mp3icon .item:nth-of-type(1) {
  animation: grow 1s -0.45s ease-in-out infinite;
}

.mp3icon .item:nth-of-type(2) {
  animation: grow 1s -0.3s ease-in-out infinite;
}

.mp3icon .item:nth-of-type(3) {
  animation: grow 1s -0.15s ease-in-out infinite;
}

.mp3icon .item:nth-of-type(4) {
  animation: grow 1s ease-in-out infinite;
}

@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
}

</style>
